<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>Spring Boot Security示例</title>
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{css/app.css}" />
<link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/> 
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
<script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
<script type="text/javascript">
	$(function(){
		$("#loginBtn").click(function(){
			var loginName = $("#loginName");
			var password = $("#password");
			var msg = "";
			if(loginName.val() == ""){
				msg = "登录名称不能为空!";
				loginName.focus();
			}else if(password.val() == ""){
				msg = "密码不能为空!";
				password.focus();
			}
			if(msg != ""){
				alert(msg);
				return false;
			}
			$("#loginForm").submit();
		});
	});
</script>
</head>
<body>
<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">简单Spring Boot Security示例</h3>
		</div>
</div>
<div id="mainWrapper">
		<div class="login-container">
			<div class="login-card">
				<div class="login-form">
					<!-- 表单提交到login -->
					<form id="loginForm" th:action="@{/login}" method="post" class="form-horizontal">
						<!-- 用户名或密码错误提示 -->
						<div th:if="${param.error != null}">
						  <div class="alert alert-danger">
								<p><font color="red">用户名或密码错误!</font></p>
							</div>
						</div>
						<!-- 注销提示 -->
						<div th:if="${param.logout != null}">
						  <div class="alert alert-success">
								<p><font color="red">用户已注销成功!</font></p>
							</div>
						</div>
						<div class="input-group input-sm">
							<label class="input-group-addon"><i class="fa fa-user"></i></label>
							<input type="text" class="form-control" id="loginName" name="loginName" placeholder="请输入用户名"/>
						</div>
						<div class="input-group input-sm">
							<label class="input-group-addon"><i class="fa fa-lock"></i></label> 
							<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"/>
						</div>
						<div class="form-actions">
							<input id="loginBtn" type="button"
								class="btn btn-block btn-primary btn-default" value="登录"/>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
</html>